<template>
    <div class="hello">
        <div class="block">
            <p>组件值：{{ value }}</p>
            <el-date-picker
                    v-model="value"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
            <!-- :picker-options="pickerOptions(disableTimeArr)"-->
        </div>
        <hr>
        <p>测试加密算法DES:{{testDes}}</p>
        <hr>
        <h1>{{ msg }}</h1>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="150">
            </el-table-column>
            <el-table-column label="配送信息">
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column label="地址">
                    <el-table-column
                            prop="province"
                            label="省份"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            width="300">
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            width="120">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="1"
                :page-sizes="[2, 4, 6, 8,10]"
                :page-size="2"
                :total="10"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <p>
            For a guide and recipes on how to configure / customize this project,<br>
            check out the
            <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
                   rel="noopener">babel</a></li>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank"
                   rel="noopener">eslint</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
            <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
            <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
            <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
            <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
            <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
            <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
            <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank"
                   rel="noopener">vue-devtools</a></li>
            <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
            <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
        </ul>

    </div>

</template>

<script>
    import desUtils from '../utils/des'
    import moment from 'moment';
    /*export default {
        name: 'HelloWorld',
        props: {
            msg: String
        }
    }
    */
    export default {
        data() {

            return {
                msg: 'HelloWorld',
                currentPage: 1,
                pageSize: 2,
                tableData: [],
                data: [{
                    date: '2016-05-03',
                    name: '王小虎1',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-02',
                    name: '王小虎2',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎3',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎4',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-08',
                    name: '王小虎5',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-06',
                    name: '王小虎6',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-07',
                    name: '王小虎7',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }
                    , {
                        date: '2016-05-07',
                        name: '王小虎8',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }
                    , {
                        date: '2016-05-07',
                        name: '王小虎9',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }
                    , {
                        date: '2016-05-07',
                        name: '王小虎10',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    }
                ],
                /*日期控件测试START*/
                disableTimeArr: ['2019-11-11', '2019-11-12', '2019-11-13'],
                pickerOptions: {},
                value: '',
                /*日期控件测试END*/
                /*DES加密算法测试START*/
                testDes:''
                /*DES加密算法测试END*/
            }
        },
        created() {
            /*内存分页测试*/
            this.pageData(this.currentPage, this.pageSize)


            /*=====================日期控件测试START===============================*/
            // 模拟后端请求拿到数据后填充到disableTimeArr里边
            // 假设拿到的数组为['2019-11-19','2019-11-20']
            let fromBackEndTimeArr = ['2019-11-19','2019-11-20','2019-11-29'];
            fromBackEndTimeArr.forEach(disableTime=>{
                this.disableTimeArr.push(disableTime)
            })


            this.pickerOptions = {
                disabledDate: function (time) {
                    console.log('=====>time', time)
                    let formattedTime = moment(time).format('YYYY-MM-DD')
                    // 模拟拿到12月份的日期
                    this.disableTimeArr.push('2019-12-10')
                    return time.getTime() < Date.now() + 24*3600*1000 || this.disableTimeArr.indexOf(formattedTime) != -1 ? true : false;
                }.bind(this)
            }
            /*=====================日期控件测试END=================================*/

            /*DES加密算法测试*/
            this.testDes = desUtils.encrypt('12345678', '123456', 0)


        },
        methods: {
            pageData(currentPage, pageSize) {
                let startIdx = (currentPage - 1) * pageSize
                let lastIdx = startIdx + pageSize
                console.log(startIdx, '==', lastIdx)
                this.tableData = this.data.slice(startIdx, lastIdx)
            },
            sizeChangeHandle(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.pageData(this.currentPage, this.pageSize)

            },
            currentChangeHandle(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.pageData(this.currentPage, this.pageSize)

            }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
